<template>
    <div class="schcontainer">
        <div class="personalBlock1" ref="cardRef">
            <div class="light" v-if="showLight" ref="lightRef"></div>
            <div class="personalInfo1">
                <div class="sch"><a href="https://www.ncist.edu.cn/Home/index.htm" target="_blank">学校: 应急管理大学</a></div>
                <div class="major">专业：计算机科学与技术</div>
                <div class="rank">年级：2021级</div>
                <div class="endTime">毕业时间：2025年</div>
                <img src="@/assets/uem.jpg" alt="" class="schimg">
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useLight } from './useLight.vue'
const light = ref()
const { cardRef, lightRef, showLight } = useLight();

</script>
<style scoped>
.schcontainer {
    position: relative;
    height: 100vh;
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.personalBlock1 {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    height: 65%;
    width: 75%;
    left: 15%;
    top: 10%;
    background: linear-gradient(145deg,
            rgba(59, 59, 61, 0.85),
            rgba(45, 45, 47, 0.95));
    backdrop-filter: blur(12px);
    border-radius: 24px;
    border: 1px solid rgba(190, 198, 199, 0.6);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    padding: 30px;
    box-sizing: border-box;

    .light {
        position: absolute;
        width: 120px;
        height: 120px;
        background: rgba(240, 240, 245, 0.15);
        filter: blur(90px);

    }

    &::before {
        content: '';
        position: absolute;
        width: 150%;
        /* 修正覆盖范围 */
        height: 150%;
        background: linear-gradient(45deg,
                rgba(255, 255, 255, 0.1) 0%,
                rgba(255, 255, 255, 0.05) 50%,
                rgba(255, 255, 255, 0.1) 100%);
        transform: rotate(30deg) translate(-20%, -50%);
        animation: lightFlow 8s infinite linear;
        opacity: 0.8;
        z-index: 0;
        /* 修正层级 */
    }

    &:hover {
        transform: translateY(-8px);
        box-shadow: 0 16px 56px rgba(0, 0, 0, 0.5);
    }

    .light {
        width: 120px;
        height: 120px;
        background: rgba(240, 240, 245, 0.15);
        filter: blur(90px);
        z-index: -1;
    }

    .personalInfo1 {
        width: 90%;
        max-height: 100%;
        overflow: visible;
        left: 0;
        padding: 20px;
        box-sizing: border-box;
        z-index: 1;
        /* 确保内容在上层 */

        .sch,
        .major {
            max-width: 80%;
            word-break: break-word;
            color: #E0E0E0;
            /* 统一字体颜色 */
            font-family: 'Segoe UI', system-ui;
            /* 统一字体 */
        }

        .sch {
            font-size: 1.8rem;
            /* 与helloPage统一比例 */
            font-weight: 600;
            margin: 15px 0;
            position: relative;
            padding-left: 35px;

            &::before {
                content: '▹';
                position: absolute;
                left: 0;
                color: #6DD5FA;
                font-size: 1.8rem;
            }

            a {
                text-decoration: none;
                /* 默认无下划线 */
                position: relative;
                transition: all 0.3s ease;
                color: #E0E0E0;

                &::after {
                    content: '';
                    position: absolute;
                    bottom: -2px;
                    left: 0;
                    width: 0;
                    height: 2px;
                    background: #6DD5FA;
                    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                }

                &:hover::after {
                    width: 100%;
                }
            }
        }

        .rank,
        .major,
        .endTime {
            line-height: 40px;
            font-size: 1.4rem;
            /* 与专业相同字号 */
            font-weight: 400;
            color: #E0E0E0;
            /* 统一字体颜色 */
            margin: 10px 0;
            padding-left: 35px;
            /* 保持对齐 */
            position: relative;
            font-family: 'Segoe UI', system-ui;

            /* 添加动态下划线效果 */
            &::before {
                content: '▹';
                /* 与学校相同的装饰符号 */
                position: absolute;
                left: 0;
                color: #6DD5FA;
                font-size: 1.4rem;
                transition: transform 0.3s ease;
            }

            /* 添加渐隐下划线 */
            &::after {
                content: '';
                position: absolute;
                bottom: -5px;
                left: 35px;
                width: 30%;
                /* 稍短于专业的下划线 */
                height: 1px;
                background: linear-gradient(to right,
                        rgba(109, 213, 250, 0.6),
                        rgba(190, 198, 199, 0.3));
                transition: width 0.3s ease;
            }

            &:hover {
                &::before {
                    transform: translateX(3px);
                }

                &::after {
                    width: 40%;
                }
            }
        }


        .schimg {
            position: absolute;
            right: 5%;
            /* 修正图片位置 */
            top: 50%;
            transform: translateY(-50%);
            width: 100px;
            /* 调整尺寸 */
            height: 100px;
            border: 2px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            border-radius: 8px;
            /* 添加圆角 */

            &:hover {
                transform: translateY(-50%) scale(1.05);
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
            }
        }
    }
}

@keyframes lightFlow {
    0% {
        transform: rotate(30deg) translate(-25%, -40%);
        opacity: 0.6;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        transform: rotate(30deg) translate(125%, 60%);
        opacity: 0.6;
    }
}
</style>
